<template>
<div>

<!-- 轮播图 -->

  <carousels :lunbotuList="lunbotuList" :isfull="true"></carousels>

<!-- 九宫格 -->
 <ul class="mui-table-view mui-grid-view mui-grid-9">
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                        <img src="../../lib/images/menu1.png">
		                    <div class="mui-media-body">新闻资讯</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
		                   <img src="../../lib/images/menu2.png">
		                    <div class="mui-media-body">图片分享</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
		                    <img src="../../lib/images/menu3.png">
		                    <div class="mui-media-body">商品购买</div></router-link></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../lib/images/menu4.png">
		                    <div class="mui-media-body">留言反馈</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../lib/images/menu5.png">
		                    <div class="mui-media-body">视频专区</div></a></li>
		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <img src="../../lib/images/menu6.png">
		                    <div class="mui-media-body">关于我们</div></a></li>
</ul> 


</div>
 

</template>

<script>

import carousels from '../subcomponents/carousel.vue'

export default {
  data() {
    return {
      lunbotuList: [],
    };
  },

  created() { //在钩子函数调用getlunbo方法
    this.getLunbotu();
  },

  methods: {
    getLunbotu() {
      //请求数据接口
      this.$http
        .get("api/getlunbo")
        .then((reslut) => {
          //获取数据，加入data中的lunbotuList
          if (reslut.body.status === 0) {
            this.lunbotuList = reslut.body.message;
          } else {
            this.$message({
              message: "失败了",
              type: "error",
            });

          }
       });
    },
  },

  components: {
   carousels
  },

};
</script>

<style lang="scss" scoped>


.mui-grid-view.mui-grid-9{
  background-color: snow;
  border: none;

  img{
    width: 60px;
    height: 60px;
  }
  
}

  .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
    font-size: 13px;
  }


 .mui-grid-view.mui-grid-9 .mui-table-view-cell{
     border: none;
  }

</style>